<markup>
<div class = "loading">
	<label>
		正在初始化
		<span>正在加载并应用配置...</span>
	</label>
</div>

<section data-view-id="page1" data-view="true">
	<header>
		<span class="nav-back" data-view-rel=":back"></span>
		视图
		<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
	</header>
	<div class = "body">
		<h1>视图就绪</h1>
	</div>
</section>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<style>
.loading{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #EEEEEE;
}
.loading label{
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
	font-size: 0.16rem;
}
.loading span{
	display: block;
	font-size: 0.12rem;
	font-weight: lighter;
	margin-top: 0.1rem;
}

[data-view-container][data-view-state="ready"] .loading{
	display: none;
}
</style>
<script>
var spanObj = document.querySelector(".loading span");

/**
 * 加载并应用配置
 * @param {Function} callback 操作完成后要执行的回调方法
 */
var loadAndApplyConfig = function(callback){
	spanObj.innerHTML = "正在加载并应用配置...";

	/* 使用定时器模拟操作过程及网络耗时 */
	setTimeout(function(){
		callback();
	}, 1000);
};

/**
 * 执行token登录
 * @param {Function} callback 操作完成后要执行的回调方法
 */
var loginByToken = function(callback){
	spanObj.innerHTML = "正在登录...";

	/* 使用定时器模拟操作过程及网络耗时 */
	setTimeout(function(){
		callback();
	}, 1000);
};

/**
 * 加载用户数据
 * @param {Function} callback 操作完成后要执行的回调方法
 */
var loadUserData = function(callback){
	spanObj.innerHTML = "正在加载用户数据...";

	/* 使用定时器模拟操作过程及网络耗时 */
	setTimeout(function(){
		callback();
	}, 1000);
};

/**
 * 通过设置初始化器，应用可以根据需要灵活决定View的初始化时机，例如：
 * 1. 读取并应用陪之后
 * 2. token登录之后
 */
View.setInitializer(
	function(init){
		loadAndApplyConfig(function(){
			loginByToken(function(){
				loadUserData(init);
			});
		});
	},
	"rightnow"/* 初始化器的自动执行时机。domready：DOM就绪后执行；rightnow：立即执行。默认为：domready */
);
</script>
<script class = "ctrl">
	{
		/* 是否声明自己的 initializer */
		ifSpecifyViewjsInitializer: true
	}
</script>